<template>
  <div>
    {{ tableData }}
    <table border>
      <tbody>
        <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
          <td v-for="(cell, colIndex) in row" :key="colIndex" :rowspan="cell.rowspan" :colspan="cell.colspan"
            :style="{ width: cell.width + 'px', height: cell.height + 'px', left: cell.x + 'px', top: cell.y + 'px' }">
            {{ cell.text }} {{ tableData.length }}{{ rowIndex + 1 }}
            {{ tableData.length != rowIndex + 1 }}
            <button @click="mergeRow(rowIndex, colIndex)" v-if="tableData.length != rowIndex + 1">合并行</button>
            <button @click="mergeColumn(rowIndex, colIndex)" v-if="row.length != colIndex + 1">合并列</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        [
          { text: 'Cell 1', rowspan: 1, colspan: 1, width: 100, height: 50, x: 0, y: 0 },
          { text: 'Cell 2', rowspan: 1, colspan: 1, width: 100, height: 50, x: 100, y: 0 },
          { text: 'Cell 3', rowspan: 1, colspan: 1, width: 100, height: 50, x: 200, y: 0 },
          { text: 'Cell 4', rowspan: 1, colspan: 1, width: 100, height: 50, x: 300, y: 0 },
        ],
        [
          { text: 'Cell 5', rowspan: 1, colspan: 1, width: 100, height: 50, x: 0, y: 50 },
          { text: 'Cell 6', rowspan: 1, colspan: 1, width: 100, height: 50, x: 100, y: 50 },
          { text: 'Cell 7', rowspan: 1, colspan: 1, width: 100, height: 50, x: 200, y: 50 },
          { text: 'Cell 8', rowspan: 1, colspan: 1, width: 100, height: 50, x: 300, y: 50 },
        ],
        [
          { text: 'Cell 9', rowspan: 1, colspan: 1, width: 100, height: 50, x: 0, y: 100 },
          { text: 'Cell 10', rowspan: 1, colspan: 1, width: 100, height: 50, x: 100, y: 100 },
          { text: 'Cell 11', rowspan: 1, colspan: 1, width: 100, height: 50, x: 200, y: 100 },
          { text: 'Cell 12', rowspan: 1, colspan: 1, width: 100, height: 50, x: 300, y: 100 },
        ],
      ],
    };
  },
  methods: {
    //合并列
    removeNextObject(arr, target) {
      for (let i = 0; i < arr.length - 1; i++) {
        if (arr[i] === target && arr[i + 1] !== undefined) {
          arr.splice(i + 1, 1);
          break;
        }
      }
      return arr;
    },

    //单元格 列合并的时候获取当前点击的上一行
    // pverObject(arr, target) {
    //   var objRow=[]
    //   if (target.y != 0) {
    //     for (var i in arr) {
    //       for (var j in arr[i]) {
    //         if (arr[i][j] === target) {
    //           objRow = arr[i-1]
    //           break
    //         }
    //       }
    //     }
    //     return objRow;
    //   }
    // },

    //判断行    点击当前单元格的的时候是否可以点击
    getNextRow(arr, target) {
      for (var i in arr) {
        for (var j in arr[i]) {
          if (arr[i][j] === target) {  // 获取当前行
            var nextList = arr[parseInt(i) + target.rowspan];  //获取当前合并单元格的下行的数据
            var flag = false;
            for (var k in nextList) {
              if (target.x == nextList[k].x) {
                flag = true;
                if (target.width < nextList[k].width) {
                  this.$message({ message: "当前单元格小于要合并的单元格，不能进行合并", type: 'warning' })
                  return false;
                }
              }
            }
            if (!flag) {
              this.$message({ message: "当前单元格小于要合并的单元格，不能进行合并", type: 'warning' })

              return false;
            }

          }
        }
      }


      return true
    },
    //判断列   点击当前单元格的的时候是否可以点击 
    getRightCol(arr, target) {
      for (var i in arr) {
        for (var j in arr[i])
          if (arr[i][j] === target) {
            var rightList = arr[i][parseInt(j) + 1];
            var flag = false;

            //判断右侧是否有未合并行的单元格
            if ((target.x + target.width) == rightList.x) {

              if(target.height!=rightList.height){
                this.$message({ message: "当前单元格小于要合并的单元格，不能进行合并", type: 'warning' })
              return false
              }else{
                return true
              }

            }else{
              this.$message({ message: "当前单元格不能进行合并啦", type: 'warning' })
              return false
            }


          }
      }

      return true

    },
    //获取当前点击单元格右侧相邻的第一个单元格
    nextObject(arr, target) {
      var objRow = {};
      for (var i in arr) {
        for (var j in arr[i])
          if (arr[i][j] === target) {
            objRow = arr[i][parseInt(j) + 1]
            break
          }
      }

      return objRow
    },


    //合并行
    removeNextRowObject(arr, target) {
      // debugger;
      console.log(arr, target)
      var col = target.colspan;
      for (var i in arr) { //
        for (var j in arr[i]) {
          if (arr[i][j] === target) {  // 获取当前行
            var nextList = arr[parseInt(i) + target.rowspan];  //获取当前合并单元格的下行的数据
            for (var k in nextList) {  //删除要合并的数据
              if (nextList[k].x == target.x){
                nextList.splice(k, col)
              break
            }
            }
          }
        }
      }
    },

    mergeRow(rowIndex, colIndex) {
      const cell = this.tableData[rowIndex][colIndex];
      // this.nextObject(this.tableData, cell).colspan;
      console.log(cell,this.tableData,"刘海容测试")
      var flag = this.getNextRow(this.tableData, cell)
      // console.log(flag)
      if (!flag) {
        return false
      }
      //     console.log(cell, cell.rowspan, rowIndex, colIndex, "=========行========")
      // if (cell.rowspan === 1) {
      //   cell.rowspan = 2;
      //   cell.height *= 2;
      //   console.log(rowIndex + 1, colIndex, 1, 0, 0, cell.height, "++++++++++++++++行+++++++++++++++")
      //   this.updateCellPositions(rowIndex + 1, colIndex, 1, 0, 0, cell.height);
      // } else {
      //   cell.rowspan = 1;
      //   cell.height /= 2;
      //   this.updateCellPositions(rowIndex + 1, colIndex, -1, 0, 0, -cell.height);
      // }

      this.removeNextRowObject(this.tableData, cell)

      cell.rowspan += 1;
      cell.height *= 2;
      // console.log(rowIndex + 1, colIndex, 1, 0, 0, cell.height, "++++++++++++++++行+++++++++++++++")
      // this.updateCellPositions(rowIndex + 1, colIndex, 1, 0, 0, cell.height);
    },
    mergeColumn(rowIndex, colIndex) {
      const cell = this.tableData[rowIndex][colIndex];
      console.log(cell,this.tableData,"刘海容测试11")
      var flag = this.getRightCol(this.tableData, cell)
      if (!flag) {

        return false

      }
      // if (!flag) {
      //   return false
      // }
      // var flag=this.getNextRow(this.tableData,cell)
      //   console.log(flag)
      //   if(!flag){
      //     return false
      //   }
      // console.log(this.nextObject(this.tableData,cell), "++++++++++++++++++")
      //   console.log(cell, cell.rowspan, rowIndex, colIndex, "=========列=======")
      //  if (cell.colspan === 1) {

      //  console.log(this.pverObject(this.tableData,cell),cell,"++++++++++++++++++")
      //  pverRow= this.pverObject(this.tableData,cell)
      // for(var x in )
      
      cell.colspan += this.nextObject(this.tableData, cell).colspan;
      cell.width += this.nextObject(this.tableData, cell).width;
      // console.log(rowIndex, colIndex + 1, 0, 1, cell.width, "===width", 0, "====height", "++++++++++++++++列+++++++++++++++")
      this.updateCellPositions(cell, rowIndex, colIndex + 1, 0, 1, cell.width, 0);

      //  }
      // else {
      //   cell.colspan = 1;
      //   cell.width /= 2;
      //  this.updateCellPositions(cell,rowIndex, colIndex + 1, 0, -1, -cell.width, 0);
      // }
    },
    updateCellPositions(cell, startRow, startCol, rowOffset, colOffset, widthOffset, heightOffset) {
      console.log(cell, startRow, startCol, rowOffset, colOffset, widthOffset, "===width", heightOffset, "====height")
      for (let i = startRow; i < this.tableData.length; i++) {
        //   console.log(this.tableData[i])
        this.removeNextObject(this.tableData[i], cell)

        // for (let j = startCol; j < this.tableData[i].length; j++) {
        //   const cell = this.tableData[i][j];
        //   cell.x += colOffset * cell.width;
        //   cell.y += rowOffset * cell.height;
        //   cell.width += widthOffset;
        //   cell.height += heightOffset;
        // }
      }
    },
  },
};
</script>